<template>
  <div>
    <!-- 搜索 -->
    <van-search v-model="keyword" shape="round" placeholder="请输入搜索关键词">
      <template #left>
        <van-icon @click="goIndex" size="22px" name="arrow-left" />
      </template>
    </van-search>
    <!-- 分类 -->
    <div class="box">
      <van-sidebar v-model="active" @change="changeActive">
        <van-sidebar-item
          v-for="(item, index) in cate_list"
          :key="index"
          :title="item.categoryName"
        />
      </van-sidebar>
      <div class="right">
        <div v-for="(item, index) in tow_cateList" :key="index">
          <p class="p1">{{ item.categoryName }}</p>

          <van-grid :column-num="3" :border="false" center>
            <van-grid-item
              @click="List(ite)"
              v-for="(ite, ind) in item.thirdLevelCategoryVOS"
              :key="ind"
              icon="youzan-shield"
              icon-color="red"
              :text="ite.categoryName"
            />
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { cateList } from '../../request/cate.js'
export default {
  setup() {
    // 定义数据
    const state = reactive({
      cate_list: [],
      tow_cateList: [],
      active: 0,
      keyword: '',
    })
    // 请求数据
    let getList = async () => {
      let res = await cateList()
      state.cate_list = res.data.data
      state.tow_cateList = state.cate_list[state.active].secondLevelCategoryVOS
    }
    // 挂载数据
    getList()
    // 路由跳转
    const router = useRouter()
    let goIndex = () => {
      router.push({ path: '/index', query: {} })
    }
    // 定义事件
    let changeActive = (e) => {
      state.active = e
      getList()
    }
    let List = (item) => {
      let arr = {
        keyword: state.keyword,
        pageNumber: 1,
        goodsCategoryId: item.categoryId,
        orderBy: '',
      }
      console.log(arr)
    }
    return {
      ...toRefs(state),
      goIndex,
      changeActive,
      List,
    }
  },
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  .van-sidebar {
    width: 3.3rem;
  }
  .right {
    flex: 1;
    .p1 {
      font-size: 0.5rem;
      margin-left: 0.3rem;
    }
  }
}
</style>
